.login-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}

.login-box {
    width: 400px;
}

.card {
    border: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.card-outline.card-primary {
    border-top: 3px solid #007bff;
}

.login-box-msg {
    color: #666;
}

.input-group-text {
    background: transparent;
    border-left: none;
}

.form-control {
    border-right: none;
}

.form-control:focus {
    box-shadow: none;
    border-color: #80bdff;
}

.form-control:focus + .input-group-append .input-group-text {
    border-color: #80bdff;
}

.btn-primary {
    background: linear-gradient(to right, #007bff, #0056b3);
    border: none;
    padding: 10px;
}

.btn-primary:hover {
    background: linear-gradient(to right, #0056b3, #003980);
}

.brand-image {
    display: block;
    margin: 0 auto 1rem;
}

.login-box a {
    color: #007bff;
}

.login-box a:hover {
    color: #0056b3;
}

@media (max-width: 576px) {
    .login-box {
        width: 90%;
        margin-top: -50px;
    }
} 